<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">字段配置：{{ tableName }}</span>
            <el-button :loading="genDownLoading" icon="el-icon-s-promotion" size="mini" style="float: right; padding: 6px 9px;" type="success" @click="toGenDown">保存&生成&下载</el-button>
            <el-button :loading="genLoading" icon="el-icon-s-promotion" size="mini" style="float: right; padding: 6px 9px;margin-right: 9px" type="success" @click="toGen">保存&生成</el-button>
            <el-button :loading="columnLoading" icon="el-icon-check" size="mini" style="float: right; padding: 6px 9px;margin-right: 9px" type="primary" @click="saveColumnConfig">保存</el-button>
            <el-tooltip class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
              <el-button :loading="syncLoading" icon="el-icon-refresh" size="mini" style="float: right; padding: 6px 9px;" type="info" @click="sync">同步</el-button>
            </el-tooltip>
            <el-button :loading="syncLoading" icon="el-icon-check" size="mini" style="float: right; padding: 6px 9px;" type="primary" @click="sync">
              <router-link :to="'/dev/code/preview/' + tableName">预览</router-link>
            </el-button>
          </div>
          <el-form size="small" label-width="90px">
            <el-table v-loading="crud.loading" :data="crud.data" :max-height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px">
              <el-table-column prop="columnName" label="字段名称" />
              <el-table-column prop="columnType" label="字段类型" />
              <el-table-column prop="remark" label="字段描述">
                <template slot-scope="scope">
                  <el-input v-model="crud.data[scope.$index].remark" size="mini" class="edit-input" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="必填" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="crud.data[scope.$index].notNull" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="列表" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="crud.data[scope.$index].listShow" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="表单" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="crud.data[scope.$index].formShow" />
                </template>
              </el-table-column>
              <el-table-column label="表单类型">
                <template slot-scope="scope">
                  <el-select v-model="crud.data[scope.$index].formType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                    <el-option label="文本框" value="Input" />
                    <el-option label="文本域" value="Textarea" />
                    <el-option label="单选框" value="Radio" />
                    <el-option label="下拉框" value="Select" />
                    <el-option label="日期框" value="Date" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="查询方式">
                <template slot-scope="scope">
                  <el-select v-model="crud.data[scope.$index].queryType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                    <el-option label="=" value="=" />
                    <el-option label="!=" value="!=" />
                    <el-option label=">=" value=">=" />
                    <el-option label="<=" value="<=" />
                    <el-option label="Like" value="Like" />
                    <el-option label="NotNull" value="NotNull" />
                    <el-option label="BetWeen" value="BetWeen" />
                  </el-select>
                </template>
              </el-table-column>
              <!--              <el-table-column label="日期注解">-->
              <!--                <template slot-scope="scope">-->
              <!--                  <el-select v-model="crud.data[scope.$index].dateAnnotation" filterable class="edit-input" clearable size="mini" placeholder="请选择">-->
              <!--                    <el-option label="自动创建时间" value="CreationTimestamp" />-->
              <!--                    <el-option label="自动更新时间" value="UpdateTimestamp" />-->
              <!--                  </el-select>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column label="关联字典">
                <template slot-scope="scope">
                  <el-select v-model="crud.data[scope.$index].dictName" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                    <el-option v-for="item in dicts" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">生成配置</span>
            <el-button :loading="configLoading" icon="el-icon-check" size="mini" style="float: right; padding: 6px 9px" type="primary" @click="doSubmit">保存</el-button>
          </div>
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px">
            <el-form-item label="作者名称" prop="author">
              <el-input v-model="form.author" style="width: 40%" />
              <span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
            </el-form-item>
            <el-form-item label="模块名称" prop="moduleName">
              <el-input v-model="form.moduleName" style="width: 40%" />
              <span style="color: #C0C0C0;margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
            </el-form-item>
            <el-form-item label="至于包下" prop="pack">
              <el-input v-model="form.pack" style="width: 40%" />
              <span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
            </el-form-item>
            <el-form-item label="接口名称" prop="apiAlias">
              <el-input v-model="form.apiAlias" style="width: 40%" />
              <span style="color: #C0C0C0;margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
            </el-form-item>
            <el-form-item label="前端路径" prop="path">
              <el-input v-model="form.path" style="width: 40%" />
              <span style="color: #C0C0C0;margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span>
            </el-form-item>
            <el-form-item label="去表前缀" prop="prefix">
              <el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%" />
              <span style="color: #C0C0C0;margin-left: 10px;">默认不去除表前缀，可自定义</span>
            </el-form-item>
            <el-form-item label="是否覆盖" prop="cover">
              <el-radio-group v-model="form.cover" size="mini" style="width: 40%">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="0">否</el-radio-button>
              </el-radio-group>
              <span style="color: #C0C0C0;margin-left: 10px;">谨防误操作，请慎重选择</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CRUD, { presenter, form } from '@crud/crud'
import crudGenConfig, { update, getGenConfig } from '@/api/devplatform/generator/genConfig'
import { save, sync, generator, download } from '@/api/devplatform/generator/generator'
import { downloadFile } from '@/utils/index'
import { getDictList } from '@/api/system/config/dict/dict_type'

// crud交由presenter持有
const crud = CRUD({ title: '字段配置', url: 'gen/code/opt/talbe/configs', crudMethod: { ...crudGenConfig }})
const defaultForm = { id: null, tableName: '', author: '', pack: '', path: '', moduleName: '', cover: 'false', apiPath: '', prefix: '', apiAlias: null }

export default {
  name: 'GeneratorConfig',
  components: {},
  mixins: [presenter(crud), form(defaultForm)],
  data() {
    return {
      activeName: 'first', tableName: '', tableHeight: 550, columnLoading: false, configLoading: false, dicts: [], syncLoading: false, genLoading: false, genDownLoading: false,
      rules: {
        author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
        pack: [{ required: true, message: '包路径不能为空', trigger: 'blur' }],
        moduleName: [{ required: true, message: '包路径不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '前端路径不能为空', trigger: 'blur' }],
        apiAlias: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
        cover: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 385
    this.tableName = this.$route.params.tableName

    getGenConfig(this.tableName).then(data => {
      this.crud.resetForm(data)
    })

    getDictList().then(data => {
      this.dicts = data
    })
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params = { tableName: this.$route.params.tableName }
    },
    saveColumnConfig() {
      this.columnLoading = true
      save(this.crud.data).then(res => {
        this.crud.notify('保存成功', 'success')
        this.columnLoading = false
      }).catch(() => {
        this.columnLoading = false
      })
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.configLoading = true
          update(this.form).then((res) => {
            this.crud.notify('保存成功', 'success')
            this.configLoading = false
          }).catch(() => {
            this.configLoading = false
            this.crud.notify('发生异常', 'success')
          })
        }
      })
    },
    sync() {
      this.syncLoading = true
      sync([this.tableName]).then(() => {
        this.crud.toQuery()
        this.crud.notify('同步成功', 'success')
        this.syncLoading = false
      }).then(() => {
        this.syncLoading = false
      })
    },
    toGen() {
      this.genLoading = true
      save(this.crud.data).then((res) => {
        this.crud.notify('保存成功', 'success')
        // 生成代码
        generator(this.tableName, 0).then((data) => {
          this.genLoading = false
          this.crud.notify('生成成功', 'success')
        }).catch(() => {
          this.genLoading = false
        })
      }).catch(() => {
        this.genLoading = false
      })
    },
    toGenDown() {
      this.genDownLoading = true
      save(this.crud.data).then((res) => {
        this.crud.notify('保存成功', 'success')
        // 生成代码
        generator(this.tableName, 0).then((data) => {
          this.genDownLoading = false
          this.crud.notify('生成成功', 'success')
          // 打包下载
          download(this.tableName).then(data => {
            downloadFile(data, this.tableName, 'zip')
          })
        }).catch(() => {
          this.genDownLoading = false
        })
      }).catch(() => {
        this.genDownLoading = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .edit-input {
    .el-input__inner {
      border: 1px solid #e5e6e7;
    }
  }
</style>

<style scoped>
  /deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
